<script setup>
import HomeHeader from '@/views/home/cpns/home-header.vue'
import HomeContent from '@/views/home/cpns/home-content.vue'
import LoginDialog from '@/components/login/login-dialog.vue'
import {ref, watch} from 'vue'
import useScroll from '@/utils/useScroll.js'
import useArticleStore from '@/stores/article/index.js'
import TopSearch from "@/components/top/top-search.vue";

const dialogRef = ref()
const articleStore = useArticleStore()
articleStore.getNewsListAction(1, 10, "", articleStore.channelId)

const {isScrollBottom, scrollTop} = useScroll()

watch(isScrollBottom, (newValue) => {
  if (newValue) {
    articleStore.loadIngMoreNews(articleStore.searchParam, articleStore.channelId).then(() => {
      isScrollBottom.value = false
    })
  }
})

const isNavShow = ref(false)
watch(scrollTop, (newValue) => {
  if (newValue > 240) {
    //显示导航栏
    isNavShow.value = true
  } else {
    isNavShow.value = false
  }
})
</script>

<template>
  <div class="home">
    <top-search v-show="isNavShow"/>
    <home-header/>
    <home-content/>
    <login-dialog ref="dialogRef"/>
  </div>
</template>

<style scoped lang="less">

</style>
